<fieldset>
  <legend>{{'options.extra.lang' | translate}}</legend>
  <div class="grid cols-2">
    <div class="field span-1">
      <select name="lang" id="lang" [(ngModel)]="settings.config.lang" (ngModelChange)="useLanguage($event)">
        <option *ngFor="let lang of languages" [ngValue]="lang.id">{{lang.label}}</option>
      </select>
      <label for="lang">{{'options.extra.lang' | translate}}</label>
    </div>
  </div>
</fieldset>
<fieldset>
  <legend>{{'options.extra.tabTitle' | translate}}</legend>
  <div class="grid cols-4">
    <div class="field span-2">
      <select name="tabTitle" id="tabTitle" [(ngModel)]="settings.config.title.type">
        <option *ngFor="let type of titleOptions" [ngValue]="type.id">{{type.label}}</option>
      </select>
      <label for="tabTitle" title="{{'options.extra.tabTitleDesc' | translate}}">{{'options.extra.tabTitle' | translate}}</label>
    </div>
    <div class="field span-2" *ngIf="settings.config.title.type === 60">
      <input type="text" name="tabTitleCustom" id="tabTitleCustom" [(ngModel)]="settings.config.title.text">
      <label for="tabTitleCustom" title="{{'options.extra.tabCustomTextDesc' | translate}}">{{'options.extra.tabCustomText' | translate}}</label>
    </div>
    <div class="field span-1" *ngIf="settings.config.title.type === 20 || settings.config.title.type === 40 || settings.config.title.type === 50">
      <select name="tabTitle" id="tabTitle" [(ngModel)]="settings.config.title.clockUsed">
        <option *ngFor="let clock of settings.config.time.clocks; let i = index" [ngValue]="i+1">Clock #{{i + 1}}</option>
      </select>
      <label for="tabTitle" title="{{'options.extra.tabClockDesc' | translate}}">{{'options.extra.tabClock' | translate}}</label>
    </div>
  </div>
</fieldset>
<fieldset class="mb0">
  <legend>{{'options.extra.advanced' | translate}}</legend>
  <div class="grid cols-3">
    <div class="field span-1">
      <button id="reset" type="button" class="btn" (click)="reset()">{{'options.extra.reset' | translate}}</button>
      <label for="reset" title="{{'options.extra.resetDesc' | translate}}">{{'options.extra.resetToDefault' | translate}}</label>
    </div>
  </div>
</fieldset>
